<!-- 
  @name: 账号登录
  @date: 2020.3.5
 -->
<template>
	<view class="content">
		<!-- 顶部背景图 -->
		<view class="top"></view>

		<!-- 输入区域 -->
		<view class="cont">
			<view class="input t1">
				<view class="icon-1"></view>
				<input class="int" placeholder="输入登录账号" placeholder-class="phcolor" v-model.trim="userCode" />
			</view>
			<view class="input">
				<view class="icon-2"></view>
				<input :password="true" class="int" placeholder="输入登录密码" placeholder-class="phcolor" v-model.trim="passWord" />
			</view>
			<view class="remember">
				<checkbox-group @change="isRemember = !isRemember">
					<label>
						<checkbox :checked="isRemember" :value="1" color="#407CFF" />
						<text>记住密码</text>
					</label>
				</checkbox-group>
			</view>
			<button class="btn" @tap="submit">登录</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userCode: '', //账号
			passWord: '', //密码
			isRemember: false // 是否记住密码
		};
	},
	onLoad() {
		let accountInfo = uni.getStorageSync('accountInfo');
		// 本地存储密码回显;
		if (accountInfo) {
			this.userCode = accountInfo.userCode;
			this.passWord = accountInfo.passWord;
			this.isRemember = true;
		}
	},
	methods: {
		submit() {
			if (!this.userCode) {
				this.$showToast('请输入用户名！');
				return;
			}
			if (!this.passWord) {
				this.$showToast('请输入密码！');
				return;
			}
			uni.login({
				provider: 'weixin',
				success: rs => {
					this.submit2(rs.code);
				},
				fail: () => {
					uni.hideLoading();
					this.$showToast('提交失败，请重试');
				}
			});
		},
		submit2(code) {
			this.$http({
				url: this.$api.userUrl + 'accountlogin',
				data: {
					code: code,
					userCode: this.userCode,
					passWord: this.passWord
				}
			}).then(res => {
				let info = JSON.parse(JSON.stringify(res));
				info.isLogin = true; //登录后将收到的信息存入本地
				this.$store.commit('login', info); //将登录状态调整为“已登录”
				this.$store.dispatch('requestSiteList');
				this.$successToast('登录成功');
				// 存入账号密码
				if (this.isRemember) {
					uni.setStorageSync('accountInfo', { userCode: this.userCode, passWord: this.passWord });
				} else {
					uni.removeStorageSync('accountInfo');
				}
				setTimeout(() => {
					this.$sucBack();
				}, 500);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $color-white;
}
.content {
	align-items: center;
}

/* 顶部背景图 */
.top {
	width: 750rpx;
	height: 390rpx;
	background-color: $color-white;
	background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15gcWuAV5S6AAC-PRAaiEY746.png');
}

/* 输入区域 */
.cont {
	width: 620rpx;
	height: 690rpx;
	margin-top: -60rpx;
	box-shadow: $box-shadow;
	background-color: $color-white;
	border-radius: $border-radius-bm;
}
.input {
	width: 500rpx;
	height: 80rpx;
	margin-top: 30rpx;
	margin-left: 60rpx;
	padding: 0 33rpx;
	border-radius: $border-radius-bm;
	background-color: $color-bg;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.input.t1 {
	margin-top: 110rpx;
}
.icon-1 {
	width: 24rpx;
	height: 26rpx;
	background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15grdiAfk9SAAACbFvOxHE834.png');
}
.icon-2 {
	width: 24rpx;
	height: 32rpx;
	background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15grnSAKDGgAAADJJfImNs674.png');
}
.int {
	flex: 1;
	margin-left: 30rpx;
}
.phcolor {
	color: $color-grey;
}
.btn {
	width: 500rpx;
	height: 80rpx;
	margin-top: 90rpx;
	margin-left: 60rpx;
	color: $color-white;
	border-radius: $border-radius-bm;
	background-color: $color-primary;
}
.remember {
	display: flex;
	justify-content: flex-end;
	margin-top: 40rpx;
	margin-right: 60rpx;
}
</style>
